<script setup>
import { ref } from 'vue'

const users = ref([]);
const user = ref({
  name: '',
  salary: '',
  job: ''
})
const add = ()=>{//添加,每添加一次都要清空输入框中的内容
  if(user.value.name.trim()===''||user.value.salary.trim()===''||user.value.job.trim()===''){
    alert('请输入员工信息');
    return;
  }
    users.value.push(user.value);
    user.value= {
      name: '',
      salary: '',
      job: ''
    }
}
</script>

<template>
<h1>员工列表练习</h1>
  <input type="text" placeholder="请输入员工姓名" v-model="user.name">
  <input type="text" placeholder="请输入员工工资" v-model="user.salary">
  <input type="text" placeholder="请输入员工岗位" v-model="user.job">
  <button @click="add">点我添加</button><hr>
  <table border="2px">
    <tr>
      <th>编号</th>
      <th>员工姓名</th>
      <th>员工工资</th>
      <th>员工岗位</th>
    </tr>
    <tr v-for="(item,index) in users">
      <td>{{index+1}}</td>
      <td>{{item.name}}</td>
      <td>{{item.salary}}</td>
      <td>{{item.job}}</td>
    </tr>
  </table>
</template>

<style scoped>

</style>